<template>
    <el-dialog :title="title" center :visible.sync="dialogVisible" width="380px" :before-close="handleClose">
        <!-- 注意：“status-icon”属性的作用是“为输入框添加表示校验结果的反馈图标”↓ -->
        <el-form :rules="rules" ref="formData" :model="formData" label-width="100px" label-position="right" style="width:300px" status-icon>
            <el-form-item label="新密码：" prop="newpassword">
                <el-input type="password" placeholder="请输入新密码" v-model="formData.newpassword" maxlength="40"></el-input>
            </el-form-item>
            <el-form-item type="password" label="确认密码：" prop="confirmPassword">
                <el-input placeholder="请输入确认密码" v-model="formData.confirmPassword" maxlength="40"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="margin-left: 0px;">
            <el-button type="primary" @click="submitForm('formData')" size="mini">确 定</el-button>
            <el-button @click="handleClose" size="mini">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import * as api from '@/api/user' // ←导入所有被导出的方法，其中星号代表所有被导出的方法。采用该方式导入的方法后面需使用时，直接采用“别名.方法名()”的方式即可
export default {
    props:{
        userId:null, // 用户ID
        title:{ // ←左边这项表示“弹出的对话框的标题”
            type:String,
            default:'',
        },
        dialogVisible:{ // ←左边这项被用来控制是否弹出对话框。取值为“true”时弹出对话框。
            type:Boolean,
            default:false,
        },
        remoteClose:Function // ←左边这项被用来关闭对话框
    },
    data() {
        // 自定义校验器，校验两次输入的密码是否一致
        // 注意：要在“return”关键字的上面声明自定义校验器（详见“ElementUI”官网，因为官网的例子里面就是这么做的（其实真正的原因是校验器里面调用了“return”关键字返回的“formData”））
        // 下面这个方法的参数中的“value”就是“确认密码”↓
        var validateConfirmPassword = (rule, value, callback) => {
            if (value !== this.formData.newpassword) {
                callback(new Error('两个密码不同'))
            } else {
                callback()
            }
        }
        return {
            formData:{ // ←左边这项表示“提交的表单数据”
                type:Object,
                default:{}
            },
            // 表单的校验规则
            rules:{
                newpassword:[
                    {required:true,message:'请输入新密码',trigger:'blur'},
                    {min:6,max:40,message:'长度在6到40个字符之间',trigger:'blur'}
                ],
                confirmPassword:[
                    {required:true,message:'确认密码必填',trigger:'blur'},
                    {validator:validateConfirmPassword,trigger:'blur'}
                ],

            }
        }
    },
    methods: {
        // 1.“handleClose”表示“关闭对话框”；2.“done”虽然是一个被传入的对象，但在此处既可以接收也可以不接收（因为该参数在此处没什么用）↓
        handleClose(done){
            this.$refs['formData'].resetFields()
            // “this.dialogVisible = false” ←左边这种写法是错误的，因为“dialogVisible”在这个组件中是使用“props”选项接收的从其父组件中被传递过来的属性，所以在作为子组件的这个组件中不能直接修改其值。
            this.remoteClose() // ←左边这项表示通过触发名为“remoteClose”的事件函数来关闭对话框
        },
        // 提交表单数据
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 注意：在调用接口之前要把userId提交给后台
                    this.formData.userId = this.userId
                    api.updatePassword(this.formData).then(response => {
                        if (response.code === 20000) {
                            this.$message({
                                message:'修改密码成功',
                                type:'success',
                                center:true
                            })
                            // 关闭对话框
                            this.handleClose()
                        } else {
                            this.$message({
                                message:response.message,
                                type:'error',
                                center:true
                            })
                        }
                    })
                } else {
                    this.$message({
                        message:'提交表单失败（表单验证未通过）',
                        type:'error',
                        center:true
                    })
                    console.log('提交表单失败（表单验证未通过）');
                    return false;
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
    div{::v-deep.el-form-item__error{white-space: pre;top: 28px;left: 30px;}}
</style>